<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title></title>
    <script src="/static/js/mui.min.js"></script>
    <link href="/static/css/mui.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="/static/dist/css/sm.min.css">
    <link rel="stylesheet" href="/static/dist/css/sm-extend.min.css">
    <script type="text/javascript" charset="utf-8">
        mui.init();
    </script>
    <style>
        button {
            float: left;
        }
    </style>
</head>
<body>
<div class="page">
    <header class="mui-bar mui-bar-nav">
        <h1 class="title">章节列表</h1>
    </header>
<nav class="bar bar-tab">
        <a class="tab-item" href="/index">
            <span class="mui-icon mui-icon-flag"></span>
            <span class="tab-label">刷词模式</span>
        </a>
        <a class="tab-item active" href="#">
            <span class="mui-icon mui-icon-bars"></span>
            <span class="tab-label">看词模式</span>
        </a>
        <a class="tab-item" href="/add_word_page">
            <span class="mui-icon mui-icon-compose"></span>
            <span class="tab-label">添加单词</span>
        </a>
    </nav>
    <div class="content">
        <br/>
        <br/>
        <div class="mui-content">
            <div class="mui-card">
                <ul class="mui-table-view">
{#                    <li class="mui-table-view-divider">收藏单词</li>#}
                    <li class="mui-table-view-cell">
                            <a class="mui-navigate-right" href="javascript:open_star_unit()">
                                <span class="mui-badge mui-badge-warning">{{ star_unit_tuple.1 }}</span>
                                {{ star_unit_tuple.0 }}
                            </a>
                        </li>
                </ul>
            </div>
            <div class="mui-card">
                <ul class="mui-table-view">
                    <li class="mui-table-view-divider">章节列表</li>
                    {% for unit in unit_list %}
                        <li class="mui-table-view-cell">
                            <a class="mui-navigate-right" href="javascript:open_unit({{ unit.0 }})">
                                <span class="mui-badge mui-badge-primary">{{ unit.2 }}</span>
                                {{ unit.1 }}
                            </a>
                        </li>
                    {% endfor %}
                </ul>
            </div>
        </div>
    </div>

</div>


</body>
<script src='//cdn.bootcss.com/jquery/3.1.1/jquery.min.js'></script>
<script src='/static/dist/js/sm.js'></script>
<script src='/static/dist/js/sm-extend.js'></script>
<script src='/static/dist/layer/layer.js'></script>

<script>
    function open_unit(idx) {
        window.location.href = "/unit_words?index=" + idx;
    }

    function open_star_unit() {
        window.location.href = "/star_words_page";
    }
    $(function () {

    });
</script>
</html>